<template>
  <div class="match-management-container">
    <div class="page-header">
      <h2 class="page-title">三单匹配</h2>
      <div class="header-buttons">
        <el-button type="primary" @click="handleGlobalMatch">
          <el-icon>
            <Connection/>
          </el-icon>
          全局匹配
        </el-button>
        <el-button type="primary" @click="handleManualMatch">
          <el-icon>
            <Plus/>
          </el-icon>
          手动匹配
        </el-button>
        <el-button type="primary" @click="refreshData">
          <el-icon>
            <Refresh/>
          </el-icon>
          刷新数据
        </el-button>
      </div>
    </div>

    <!-- 搜索栏 -->
    <el-card class="search-card">
      <el-form :model="searchForm" inline label-width="100px" @keyup.enter="handleSearch">
        <el-form-item label="匹配状态">
          <el-select v-model="searchForm.matchStatus" clearable placeholder="请选择匹配状态" style="width: 180px">
            <el-option label="全部" value=""></el-option>
            <el-option label="匹配" value="匹配"></el-option>
            <el-option label="不匹配" value="不匹配"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单据编号">
          <el-input v-model="searchForm.documentNumber" clearable placeholder="订单号/发票号/收货单号"></el-input>
        </el-form-item>
        <el-form-item label="供应商">
          <el-input v-model="searchForm.supplierName" clearable placeholder="供应商名称"></el-input>
        </el-form-item>
        <el-form-item label="匹配日期">
          <el-date-picker
              v-model="searchForm.dateRange"
              :shortcuts="dateShortcuts"
              end-placeholder="结束日期"
              range-separator="至"
              start-placeholder="开始日期"
              type="daterange"
              value-format="YYYY-MM-DD"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon>
              <Search/>
            </el-icon>
            查询
          </el-button>
          <el-button @click="resetSearch">
            <el-icon>
              <Refresh/>
            </el-icon>
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- Tab 页 -->
    <el-card class="tab-card">
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="全部" name="all"></el-tab-pane>
        <el-tab-pane label="匹配" name="match">
          <template #label>
            <span>匹配</span>
            <el-badge v-if="counters.match > 0" :value="counters.match" class="item"/>
          </template>
        </el-tab-pane>
        <el-tab-pane label="不匹配" name="unmatch">
          <template #label>
            <span>不匹配</span>
            <el-badge v-if="counters.unmatch > 0" :value="counters.unmatch" class="item"/>
          </template>
        </el-tab-pane>
      </el-tabs>

      <!-- 数据表格区域 -->
      <div class="table-operations">
        <el-button :disabled="selectedItems.length === 0" type="primary" @click="handleBatchDelete">
          <el-icon>
            <Delete/>
          </el-icon>
          批量删除
        </el-button>
        <el-button type="primary" @click="exportMatchData">
          <el-icon>
            <Download/>
          </el-icon>
          导出数据
        </el-button>
      </div>

      <!-- 数据表格 -->
      <el-table
          v-loading="loading"
          :data="matchList"
          border
          stripe
          style="width: 100%"
          @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="匹配状态" width="120">
          <template #default="scope">
            <el-tag :type="scope.row.matchResult === '匹配' ? 'success' : 'danger'">
              {{ scope.row.matchResult }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="订单编号" min-width="120" prop="orderNumber"></el-table-column>
        <el-table-column label="收货单编号" min-width="120" prop="receiptNumber"></el-table-column>
        <el-table-column label="发票编号" min-width="120" prop="invoiceNumber"></el-table-column>
        <el-table-column label="供应商" min-width="150" prop="supplierName"></el-table-column>
        <el-table-column label="订单金额" min-width="120">
          <template #default="scope">
            {{ formatCurrency(scope.row.orderAmount) }}
          </template>
        </el-table-column>
        <el-table-column label="收货单金额" min-width="120">
          <template #default="scope">
            {{ formatCurrency(scope.row.receiptAmount) }}
          </template>
        </el-table-column>
        <el-table-column label="发票金额" min-width="120">
          <template #default="scope">
            {{ formatCurrency(scope.row.invoiceAmount) }}
          </template>
        </el-table-column>
        <el-table-column label="匹配时间" min-width="170" prop="matchTime"></el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-button link type="primary" @click="viewDetail(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </el-card>

    <!-- 匹配详情对话框 -->
    <el-dialog
        v-model="detailDialogVisible"
        destroy-on-close
        title="匹配详情"
        width="80%"
    >
      <div v-if="currentDetail" v-loading="loading" class="match-detail-content">
        <el-descriptions :column="2" border title="单据信息">
          <el-descriptions-item label="匹配ID">{{ currentDetail.matchId || '暂无' }}</el-descriptions-item>
          <el-descriptions-item label="匹配状态">
            <el-tag :type="currentDetail.matchResult === '匹配' ? 'success' : 'danger'">
              {{ currentDetail.matchResult || '未知状态' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="订单编号">{{ currentDetail.orderNumber || '暂无' }}</el-descriptions-item>
          <el-descriptions-item label="订单金额">
            {{ formatCurrency(currentDetail.orderAmount) || '0.00' }}
          </el-descriptions-item>
          <el-descriptions-item label="收货单编号">{{ currentDetail.receiptNumber || '暂无' }}</el-descriptions-item>
          <el-descriptions-item label="收货单金额">
            {{ formatCurrency(currentDetail.receiptAmount) || '0.00' }}
          </el-descriptions-item>
          <el-descriptions-item label="发票编号">{{ currentDetail.invoiceNumber || '暂无' }}</el-descriptions-item>
          <el-descriptions-item label="发票金额">
            {{ formatCurrency(currentDetail.invoiceAmount) || '0.00' }}
          </el-descriptions-item>
          <el-descriptions-item label="供应商名称">{{ currentDetail.supplierName || '暂无' }}</el-descriptions-item>
          <el-descriptions-item label="匹配时间">{{ currentDetail.matchTime || '暂无' }}</el-descriptions-item>
          <el-descriptions-item :span="2" label="差异信息">
            {{ currentDetail.difference || '无差异' }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>

    <!-- 手动匹配对话框 -->
    <el-dialog v-model="matchDialogVisible" title="三单匹配" width="600px">
      <el-form :model="matchForm" label-width="100px">
        <el-form-item label="订单">
          <el-select v-model="matchForm.orderId" filterable placeholder="请选择订单">
            <template v-if="orderOptions.length > 0">
              <el-option
                  v-for="item in orderOptions"
                  :key="item.id ? item.id.toString() : ''"
                  :label="item.orderNumber ? `${item.orderNumber} - ${item.supplierName || ''}` : '未知订单'"
                  :value="item.id ? item.id.toString() : ''"
              ></el-option>
            </template>
            <el-option v-else disabled label="暂无可选订单" value=""></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收货单">
          <el-select v-model="matchForm.receiptId" filterable placeholder="请选择收货单">
            <template v-if="receiptOptions.length > 0">
              <el-option
                  v-for="item in receiptOptions"
                  :key="item.id ? item.id.toString() : ''"
                  :label="item.receiptNumber ? `${item.receiptNumber} - ${item.supplierName || ''}` : '未知收货单'"
                  :value="item.id ? item.id.toString() : ''"
              ></el-option>
            </template>
            <el-option v-else disabled label="暂无可选收货单" value=""></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发票">
          <el-select v-model="matchForm.invoiceId" filterable placeholder="请选择发票">
            <template v-if="invoiceOptions.length > 0">
              <el-option
                  v-for="item in invoiceOptions"
                  :key="item.id ? item.id.toString() : ''"
                  :label="item.invoiceNumber ? `${item.invoiceNumber} - ${item.supplierName || ''}` : '未知发票'"
                  :value="item.id ? item.id.toString() : ''"
              ></el-option>
            </template>
            <el-option v-else disabled label="暂无可选发票" value=""></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="matchDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmMatch">确 定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 全局匹配结果对话框 -->
    <el-dialog v-model="globalMatchDialogVisible" title="全局匹配结果" width="800px">
      <div v-if="globalMatchResults.length === 0" class="no-data">
        <el-empty description="没有找到可匹配的数据"></el-empty>
      </div>
      <el-table v-else :data="globalMatchResults" border stripe style="width: 100%">
        <el-table-column label="序号" type="index" width="60"></el-table-column>
        <el-table-column label="订单编号" min-width="120">
          <template #default="scope">
            {{ scope.row.orderNumber }}
          </template>
        </el-table-column>
        <el-table-column label="收货单编号" min-width="120">
          <template #default="scope">
            {{ scope.row.receiptNumber }}
          </template>
        </el-table-column>
        <el-table-column label="发票编号" min-width="120">
          <template #default="scope">
            {{ scope.row.invoiceNumber }}
          </template>
        </el-table-column>
        <el-table-column label="供应商" min-width="150" prop="supplierName"></el-table-column>
        <el-table-column label="匹配结果" min-width="100">
          <template #default="scope">
            <el-tag :type="scope.row.match ? 'success' : 'danger'">
              {{ scope.row.match ? '匹配' : '不匹配' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="原因" min-width="180" prop="reason" show-overflow-tooltip></el-table-column>
      </el-table>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="globalMatchDialogVisible = false">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue';
import {ElMessage, ElMessageBox} from 'element-plus';
import {Connection, Delete, Download, Plus, Refresh, Search} from '@element-plus/icons-vue';
import {
  batchDeleteMatch,
  createMatch,
  exportMatch,
  getAvailableReceiptsAndInvoices,
  getMatchDetail,
  getMatchPage,
  getMatchStatistics,
  getOrdersAvailableForMatch,
  globalMatch
} from '@/api/match';

// 加载状态
const loading = ref(false);
const matchList = ref<any[]>([]);
const selectedItems = ref<any[]>([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const activeTab = ref('all');

// 统计数
const counters = reactive({
  match: 0,
  unmatch: 0
});

// 搜索表单
const searchForm = reactive({
  matchStatus: '',
  documentNumber: '',
  supplierName: '',
  dateRange: [] as string[]
});

// 日期快捷选项
const dateShortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    }
  },
  {
    text: '最近一个月',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    }
  },
  {
    text: '最近三个月',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    }
  }
];

// 详情对话框
const detailDialogVisible = ref(false);
const currentDetail = ref<any | null>(null);

// 匹配对话框
const matchDialogVisible = ref(false);
const matchForm = reactive({
  orderId: '',
  receiptId: '',
  invoiceId: ''
});
const orderOptions = ref<any[]>([]);
const receiptOptions = ref<any[]>([]);
const invoiceOptions = ref<any[]>([]);

// 全局匹配相关
const globalMatchDialogVisible = ref(false);
const globalMatchResults = ref<any[]>([]);

// 获取匹配列表数据
const fetchMatchList = async () => {
  try {
    loading.value = true;

    // 准备查询参数
    const params: any = {
      pageNum: currentPage.value,
      pageSize: pageSize.value
    };

    // 添加其他查询条件
    if (searchForm.matchStatus) {
      params.matchResult = searchForm.matchStatus;
    }

    if (searchForm.documentNumber) {
      // 可能是订单号、收货单号或发票号
      if (searchForm.documentNumber.startsWith('PO')) {
        params.orderNumber = searchForm.documentNumber;
      } else if (searchForm.documentNumber.startsWith('RN')) {
        params.receiptNumber = searchForm.documentNumber;
      } else if (searchForm.documentNumber.startsWith('IN')) {
        params.invoiceNumber = searchForm.documentNumber;
      } else {
        // 如果没有明确前缀，尝试匹配所有字段
        params.documentNumber = searchForm.documentNumber;
      }
    }

    if (searchForm.supplierName) {
      params.supplierName = searchForm.supplierName;
    }

    if (searchForm.dateRange && searchForm.dateRange.length === 2) {
      params.startDate = searchForm.dateRange[0];
      params.endDate = searchForm.dateRange[1];
    }

    // 调用匹配列表API
    const response = await getMatchPage(params);

    if (response && response.code === 200) {
      // 格式化数据
      matchList.value = response.data.records || [];
      total.value = response.data.total || 0;

      // 更新计数器
      updateCounters();
    } else {
      ElMessage.error('获取匹配数据失败');
    }
  } catch (error) {
    console.error('获取匹配列表失败:', error);
    ElMessage.error('获取匹配列表失败');
  } finally {
    loading.value = false;
  }
};

// 更新计数器
const updateCounters = () => {
  counters.match = matchList.value.filter(item => item.matchResult === '匹配').length;
  counters.unmatch = matchList.value.filter(item => item.matchResult === '不匹配').length;
};

// 获取匹配统计数据
const fetchMatchStatistics = async () => {
  try {
    const params: any = {};

    if (searchForm.dateRange && searchForm.dateRange.length === 2) {
      params.startDate = searchForm.dateRange[0];
      params.endDate = searchForm.dateRange[1];
    }

    if (searchForm.supplierName) {
      params.supplierName = searchForm.supplierName;
    }

    const response = await getMatchStatistics(params);

    if (response && response.code === 200 && response.data) {
      // 更新计数器
      counters.match = response.data.matchCount || 0;
      counters.unmatch = response.data.unmatchCount || 0;
    }
  } catch (error) {
    console.error('获取匹配统计数据失败:', error);
  }
};

// 搜索处理
const handleSearch = () => {
  currentPage.value = 1;
  fetchMatchList();
};

// 重置搜索
const resetSearch = () => {
  searchForm.matchStatus = '';
  searchForm.documentNumber = '';
  searchForm.supplierName = '';
  searchForm.dateRange = [];
  handleSearch();
};

// 刷新数据
const refreshData = () => {
  fetchMatchList();
  fetchMatchStatistics();
};

// 处理Tab切换
const handleTabClick = () => {
  // 根据tab设置查询条件
  switch (activeTab.value) {
    case 'match':
      searchForm.matchStatus = '匹配';
      break;
    case 'unmatch':
      searchForm.matchStatus = '不匹配';
      break;
    default:
      searchForm.matchStatus = '';
  }

  currentPage.value = 1;
  fetchMatchList();
};

// 分页处理
const handleSizeChange = (size: number) => {
  pageSize.value = size;
  fetchMatchList();
};

const handleCurrentChange = (page: number) => {
  currentPage.value = page;
  fetchMatchList();
};

// 表格多选处理
const handleSelectionChange = (selection: any[]) => {
  selectedItems.value = selection;
};

// 格式化货币
const formatCurrency = (value: any) => {
  if (value === undefined || value === null) return '0.00';
  return Number(value).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
};

// 格式化日期时间
const formatDateTime = (dateStr: string) => {
  if (!dateStr) return '';
  const date = new Date(dateStr);
  return date.toLocaleString();
};

// 查看详情
const viewDetail = async (row: any) => {
  try {
    loading.value = true;

    // 调用API获取匹配详情
    const response = await getMatchDetail(row.id);

    if (response && response.code === 200 && response.data) {
      const matchData = response.data;

      // 转换后端数据格式为前端需要的格式
      currentDetail.value = {
        matchId: matchData.id || row.id,
        matchResult: matchData.matchResult || '未知',
        orderNumber: matchData.orderNumber || '暂无',
        orderAmount: matchData.orderAmount ? Number(matchData.orderAmount) : 0,
        receiptNumber: matchData.receiptNumber || '暂无',
        receiptAmount: matchData.receiptAmount ? Number(matchData.receiptAmount) : 0,
        invoiceNumber: matchData.invoiceNumber || '暂无',
        invoiceAmount: matchData.invoiceAmount ? Number(matchData.invoiceAmount) : 0,
        supplierName: matchData.supplierName || '暂无',
        matchTime: formatDateTime(matchData.matchTime || matchData.createTime),
        difference: matchData.difference || '无差异'
      };

      detailDialogVisible.value = true;
    } else {
      ElMessage.error('获取匹配详情失败');
    }
  } catch (error) {
    console.error('获取匹配详情失败:', error);
    ElMessage.error('获取匹配详情失败，请重试');
  } finally {
    loading.value = false;
  }
};

// 手动匹配
const handleManualMatch = async () => {
  // 清空表单
  matchForm.orderId = '';
  matchForm.receiptId = '';
  matchForm.invoiceId = '';

  try {
    // 加载订单选项
    const orderResponse = await getOrdersAvailableForMatch({
      pageNum: 1,
      pageSize: 100
    });

    if (orderResponse && orderResponse.code === 200 && orderResponse.data) {
      orderOptions.value = orderResponse.data.records || [];
    } else {
      orderOptions.value = [];
    }

    // 加载收货单和发票选项
    const documentsResponse = await getAvailableReceiptsAndInvoices();

    if (documentsResponse && documentsResponse.code === 200 && documentsResponse.data) {
      receiptOptions.value = documentsResponse.data.receipts || [];
      invoiceOptions.value = documentsResponse.data.invoices || [];
    } else {
      receiptOptions.value = [];
      invoiceOptions.value = [];
    }

    // 显示对话框
    matchDialogVisible.value = true;
  } catch (error) {
    console.error('获取匹配选项失败:', error);
    ElMessage.error('获取匹配选项失败');
  }
};

// 确认匹配
const confirmMatch = async () => {
  // 验证表单
  if (!matchForm.orderId || !matchForm.receiptId || !matchForm.invoiceId) {
    ElMessage.warning('请选择订单、收货单和发票');
    return;
  }

  try {
    loading.value = true;

    // 调用匹配API
    const response = await createMatch({
      orderId: matchForm.orderId,
      receiptId: matchForm.receiptId,
      invoiceId: matchForm.invoiceId,
      differenceReason: '',
      remark: ''
    });

    if (response && response.code === 200) {
      ElMessage.success('匹配成功');
      matchDialogVisible.value = false;
      refreshData();
    } else {
      ElMessage.error(response?.message || '匹配失败');
    }
  } catch (error) {
    console.error('匹配失败:', error);
    ElMessage.error('匹配失败');
  } finally {
    loading.value = false;
  }
};

// 全局匹配
const handleGlobalMatch = () => {
  ElMessageBox.confirm('全局匹配将自动查找并匹配所有可能的订单、收货单和发票，是否继续？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    globalMatchDialogVisible.value = true;
    loading.value = true;
    globalMatchResults.value = [];

    try {
      const response = await globalMatch();

      if (response && response.code === 200) {
        globalMatchResults.value = response.data || [];

        // 匹配完成后刷新列表
        refreshData();
      } else {
        ElMessage.error(response?.message || '全局匹配失败');
      }
    } catch (error) {
      console.error('全局匹配失败:', error);
      ElMessage.error('全局匹配失败');
    } finally {
      loading.value = false;
    }
  }).catch(() => {
    // 用户取消操作
  });
};

// 导出匹配数据
const exportMatchData = async () => {
  try {
    loading.value = true;

    // 准备导出参数
    const params: any = {};

    if (searchForm.matchStatus) {
      params.matchResult = searchForm.matchStatus;
    }

    if (searchForm.supplierName) {
      params.supplierName = searchForm.supplierName;
    }

    if (searchForm.dateRange && searchForm.dateRange.length === 2) {
      params.startDate = searchForm.dateRange[0];
      params.endDate = searchForm.dateRange[1];
    }

    const response = await exportMatch(params);

    // 确保响应是Blob类型
    if (response instanceof Blob) {
      // 创建下载链接
      const link = document.createElement('a');
      link.href = URL.createObjectURL(response);
      link.download = `匹配数据_${new Date().toISOString().slice(0, 10)}.xlsx`;
      link.click();
      URL.revokeObjectURL(link.href);

      ElMessage.success('导出成功');
    } else {
      ElMessage.error('导出失败：响应格式错误');
    }
  } catch (error) {
    console.error('导出失败:', error);
    ElMessage.error('导出失败');
  } finally {
    loading.value = false;
  }
};

// 删除匹配记录
// const handleDelete = (row: any) => {
//   ElMessageBox.confirm('确定要删除该匹配记录吗？', '提示', {
//     confirmButtonText: '确定',
//     cancelButtonText: '取消',
//     type: 'warning'
//   }).then(async () => {
//     try {
//       loading.value = true;
//
//       const response = await deleteMatch(row.id);
//
//       if (response && response.code === 200) {
//         ElMessage.success('删除成功');
//         refreshData();
//       } else {
//         ElMessage.error(response?.message || '删除失败');
//       }
//     } catch (error) {
//       console.error('删除失败:', error);
//       ElMessage.error('删除失败');
//     } finally {
//       loading.value = false;
//     }
//   }).catch(() => {
//     // 用户取消操作
//   });
// };

// 批量删除
const handleBatchDelete = () => {
  if (selectedItems.value.length === 0) {
    ElMessage.warning('请选择要删除的记录');
    return;
  }

  ElMessageBox.confirm(`确定要删除选中的 ${selectedItems.value.length} 条记录吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      loading.value = true;

      const ids = selectedItems.value.map(item => item.id);
      const response = await batchDeleteMatch(ids);

      if (response && response.code === 200) {
        ElMessage.success('批量删除成功');
        refreshData();
      } else {
        ElMessage.error(response?.message || '批量删除失败');
      }
    } catch (error) {
      console.error('批量删除失败:', error);
      ElMessage.error('批量删除失败');
    } finally {
      loading.value = false;
    }
  }).catch(() => {
    // 用户取消操作
  });
};

// 页面加载时获取数据
onMounted(() => {
  fetchMatchList();
  fetchMatchStatistics();
});
</script>

<style scoped>
.match-management-container {
  padding: 15px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.page-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.header-buttons {
  display: flex;
  gap: 10px;
}

.search-card {
  margin-bottom: 15px;
}

.tab-card {
  margin-bottom: 15px;
}

.pagination-container {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}

.related-doc {
  margin: 5px 0;
  display: flex;
  align-items: center;
}

.doc-number {
  margin-left: 5px;
}

.match-detail-content {
  padding: 10px;
}

.no-data {
  padding: 30px;
  text-align: center;
}

.table-operations {
  margin-bottom: 15px;
  display: flex;
  gap: 10px;
}

.blue-button {
  margin-left: 10px;
}
</style> 